<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<!DOCTYPE html>
<html>
<head>
	<%@include file="../include_new.jsp"%>
	<script	src="../static/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
	<link  href="../static/lib/ztree/zTreeStyle.css" type="text/css" rel="stylesheet" >
	<script src="../static/lib/zui/js/zui.sortable.min.js"></script><!-- 拖动排序 -->
</head>
<body id="z_body">
<div id="app">
	<ol class="breadcrumb" style="margin-bottom:5px;">
		<li><a href="../res/list">资源管理</a></li>
		<li class="active">${yymc}</li>
		<li><a href="../res/list">【返回】</a></li>
	</ol>

	<div class="row">
		<div class="col-xs-3">
		
			<div class="panel">
				<div class="panel-heading">
					<i class="icon icon-list"></i> 资源管理
					<a onclick="toAdd()" style="float:right;">新增资源</a>
				</div>
				<div class="panel-body">
					<div id="tree_1" class="ztree"></div>
				</div>
			</div>
			
		</div>
		
		<div class="col-xs-9" v-show="actName != ''">
			<div class="panel">
				<div class="panel-heading">
					<i class="icon icon-list"></i> <span>{{actName}}资源</span>
				</div>
				<div class="panel-body">
					<form class="form-horizontal" id="form_1">
						<input name="id" v-model="one.id" type="hidden">
						<input name="yyid" v-model="yyid" type="hidden">
			
						<div class="form-group">
							<label class="col-xs-3">父级资源</label>
							<div class="col-xs-6">
								<input class="form-control" name="fjid" value="" v-model="one.fjid" type="hidden">
								<input class="form-control" name="fjmc_" value="" v-model="one.fjmc_"
									data_tree="{type:'res', multi:false, fresh:true, extra:'${yyid}'}">
							</div>
						</div>
				
						<div class="form-group">
							<label class="col-xs-3 z_required">资源类别</label>
							<div class="col-xs-6">
								<select class="form-control" name="lb" v-model="one.lb" validType="notEmpty">
									<option></option>
									<option>菜单</option>
									<option>按钮</option>
								</select>
							</div>
						</div>
			
						<div class="form-group">
							<label class="col-xs-3 z_required">资源名称</label>
							<div class="col-xs-6">
								<input class="form-control" name="mc" v-model="one.mc" validType="notEmpty">
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-xs-3">权限代码</label>
							<div class="col-xs-6">
								<input class="form-control" name="qxdm" v-model="one.qxdm" validType="">
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-xs-3">资源地址</label>
							<div class="col-xs-6">
								<input class="form-control" name="dz" v-model="one.dz" validType="">
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-xs-3">资源图标</label>
							<div class="col-xs-6">
								<input class="form-control" name="tb" v-model="one.tb" validType="" type="hidden">
								<i class="icon icon-2x" v-bind:class="'icon-'+one.tb"></i>
								<a data-toggle='modal' data-size='lg' data-iframe="../main/iconSelector">选择图标</a>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-xs-3"></label>
							<div class="col-xs-6">
								<a class="btn btn-primary" onclick="save()">{{actName}}</a> &nbsp;
								<a class="btn btn-danger" onclick="del()" v-show="one.id != null">删除资源</a>
							</div>
						</div>
					</form>
					
					
				</div>
			</div>
			
			<div class="panel" id="panel_sort" v-show="subnodes.length > 1">
				<div class="panel-heading">
					<i class="icon icon-list"></i> 子节点排序
				</div>
				<div class="panel-body">
					<div>拖动可排序</div>
					<div class="list-group" id="sortableList">
						<div v-for="subnode in subnodes" class="list-group-item" v-bind:data_id="subnode.id"><i class="icon-move"></i>{{subnode.name}}</div>
					</div>
					<div>
						<a class="btn btn-primary" onclick="saveSort()">保存排序</a>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</div>	
<script type="text/javascript">
	var yyid = "${yyid}";//所属应用id
	
	var data = {
		one: {},
		yyid: yyid,
		actName: "",
		subnodes: []
	};
	
	var vm = new Vue({
		el: "#app",
		data: data
	});
	
	//回调-选择图标
	function onChooseIcon(val) {
		closeModal();
		vm.one.tb = val;
	}
	
	function getTree() {
		var treeSetting = {
			check: {
				enable: false,
				chkStyle: "checkbox",
				chkboxType: { "Y": "", "N": "" } // 选中不包含子节点 
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid"
				}
			},
			callback: {
				beforeClick: null,
				onClick: function(e, treeId, treeNode) {
					if(treeNode.id != "root") {
						loadOne(treeNode.id);
					}
					
					//显示可排序的下级节点
					showSubNodes4Sort(treeNode.id);
				},
				onCheck: null
			}
		};
		
		tool.query("../res/tree_getTree", {yyid: yyid}, function(res){
			var zNodes = res.data;
			cache.zNodes = zNodes;
			$.fn.zTree.init($("#tree_1"), treeSetting, zNodes);
			$.fn.zTree.getZTreeObj("tree_1").expandAll(true);
		});
	}

	//保存
	function save() {
		if(validateForm("form_1")) {//表单验证
			tool.save("save", $("#form_1").serialize(), function(data) {
				getTree();
				var id = data;
				loadOne(id);
			});
		}
	}
	
	//加载单个
	function loadOne(id) {
		tool.query("../res/tree_getOne", {id: id}, function(data) {
			vm.actName = "修改";
			vm.one = data;
		});
	}
	
	//打开新增
	function toAdd() {
		vm.actName = "新增";
		vm.one = {tb:''};
	}
	
	//删除
	function del() {
		var id = vm.one.id;
		if(id) {
			myzui.confirm("确认删除?", function(){
				tool.save("delete", {id: id}, function() {
					getTree();
				});
			});
		}
	}
	
	//根据id获取直接子节点s
	function getSubNodesById(id) {
		var list = [];
		$(cache.zNodes).each(function(){
			if(this.pid == id) {
				list.push(this);
			}
		});
		return list;
	}
	
	//为排序功能显示[直接下级节点]s
	function showSubNodes4Sort(id) {
		var nodes = getSubNodesById(id);
		vm.subnodes = nodes;
		reSort();//重新排序
	}
	
	//重新排序
	function reSort() {
		setTimeout(function() {
			var i = 0;
			$("#sortableList .list-group-item").each(function(){
				$(this).attr("data-order", i++);
			});
		}, 200);
	}
	
	//保存排序
	function saveSort() {
		var ids = "";
		$("#sortableList .list-group-item").each(function(){
			if(ids.length > 0) {
				ids += ",";
			}
			ids += $(this).attr("data_id");
		});
		
		tool.save("../res/saveSort", {ids:ids}, function(){
			getTree();
		});
	}

	$('#sortableList').sortable();//启用拖拽排序
	getTree();
</script>
<style type="text/css">
	#sortableList > .list-group-item {cursor: move} /* 为可拖动的条目应用可移动光标类型 */
	#sortableList > .list-group-item.dragging{visibility: visible; opacity: .3; }/* 为正在被拖动的条目应用半透明外观 */
	#modal_icons a{display:inline-block; padding: 5px;}
</style>

</body>
</html>